<template>
    <div class="flex-row-center base-size mb20 pointer">
        <a class="home_icon base-size" href="https://zhyq.ailuquan.cn/website/shijzslqqzf">首页</a><span class="ml5 mr5">></span><span class="base-color">人才招聘</span>
    </div>
    <div class="label">人才招聘</div>
    <div class="listDiv" style="border:none !important;">
        <div class="pd20 el-table">
            <div class="item mb20 pointer" v-for="(v,i) in list" :key="i" @click="read(v.job_id)">
                <div class="mb5 flex-row-center ju-between">
                    <span class="large-size weight">{{v.name||""}}</span>
                    <span><span class="base-color base-size">{{v.salary_start}}～{{v.salary_end}}</span> 元/月</span>
                </div>
                <div class="flex-row-center ju-between">
                    <div class="flex-row-center base-size">
                        <span class="state-btn-primary mr20">{{+v.nature?'兼职':'全职'}}</span>
                        <span>{{proxy.$utils.findObj(v.edu,globalData.eduList,'value').text}}</span>
                        <div class="line-h ml10 mr10" style="height:12px;"></div>
                        <span>{{v.working_duration_start}}～{{v.working_duration_end}}年</span>
                    </div>
                    <span class="flex-row-center base-size">
                    <!-- <div class="flex-center btn-primary radius4" style="width:60px;height:26px;">报名</div> -->
                    </span>
                </div>
            </div>
        </div>
        <div class="pd20 w100 flex-row-center ju-flex-end">
            <el-pagination
                v-model:currentPage="sifterForm.currentpage"
                v-model:page-size="sifterForm.pagesize"
                :page-sizes="[10, 20, 50, 100]" :total="total"
                @size-change="()=>{updalist()}"
                @current-change="()=>{updalist()}"
                layout="total, sizes, prev, pager, next, jumper"  background/>
        </div>
    </div>

</template>

<script setup>
    import { reactive,ref,getCurrentInstance,toRefs,provide,toRaw } from 'vue'

    let { proxy } = getCurrentInstance()
    let obj = reactive({
        total: 0,
        list:[],
        sifterForm: {
            key: '',
            state: '',
            currentpage: 1,
            pagesize: 10
        },
    });

    const updalist = (form)=>{
        let param = {
            ...obj.sifterForm,
            ...form
        }
        proxy.$ajax({url: 'jobs/list',data: param,bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                total.value = d.msg.count||0
                list.value = d.msg.list;
            }else{}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }
    updalist();

    let readId = ref(0)
    provide("id", readId); //不能加.value
    const read = (id)=>{
        readId.value = id
        proxy.routerPushMixin('/share/recruit/detail',{id:id})
    }

    let { list, sifterForm, form, total } = toRefs(obj)
</script>

<style lang="scss" scoped>
.label::before{
    content: '';display: inline-block; width: 10px;height: 10px;background: #000fff;margin-right: 5px;
}
</style>